<template>
  <div class="bridge-main" v-loading="isLoading">
    <div class="choose">
      <el-select
        v-model="bridgeValue"
        filterable
        placeholder="请选择桥梁"
        style="width: 87%"
        @change="setBridgeVal"
      >
        <el-option
          v-for="item in bridgeOption"
          :key="item.id"
          :label="item.name"
          :value="item.name"
        />
      </el-select>
      <div class="cascade-option" @click="show2 = true">
        <img
          src="../../../static/images/bridgeAreaControl/icon_kuanjia.png"
          alt=""
        />
      </div>
      <van-popup v-model:show="show2" round position="bottom">
        <van-cascader
          v-model="cascaderValue2"
          title="请选择桥梁"
          :options="options2"
          @close="show2 = false"
          @change="onChange2"
          @finish="onFinish2"
        />
      </van-popup>
    </div>
    <div class="bridge-main-content">
      <div class="bridge-img">
        <template v-if="haveLink">
          <div class="sanwei" @click="goLink">三维</div>
        </template>
        <template v-if="VideoUrl">
          <div class="video-click" v-if="!isShowVideo" @click="videoClick">
            桥区视频 >
          </div>
          <div class="video-click" v-else @click="isShowVideo = false">
            桥区图片 >
          </div>
        </template>

        <div class="video" v-show="isShowVideo">
          <video
            id="myVideo"
            x-webkit-airplay="allow"
            playsinline="true"
            webkit-playsinline="true"
            class="video-js vjs-default-skin vjs-big-play-centered video-content"
            style="width: 100%; height: 100%"
          ></video>
        </div>
        <div class="img" v-show="!isShowVideo">
          <van-empty
            image-size="100"
            description="暂无图片"
            v-if="!BgPicData?.picUrl"
          />
          <img v-else :src="baseApi + 'attach' + BgPicData?.picUrl" alt="" />
        </div>
      </div>
      <div class="bridge-info">
        <div
          class="bridge-info-item"
          :style="!showItemShowBox ? 'overflow: hidden;' : 'overflow: visible;'"
        >
          <div class="item-head">
            <div class="head-title">桥梁名称</div>
            <div
              class="head-icon"
              @click="showItemMainFalse(), (showItemShowBox = true)"
            >
              <img
                src="../../../static/images/bridgeAreaControl/icon_show.png"
                alt=""
              />
            </div>
          </div>
          <div class="item-empty" v-if="!bridgeBaseInfoData.bridgeName">
            暂无数据
          </div>
          <div class="item-sshd" v-else>
            <div class="title">{{ bridgeBaseInfoData.bridgeName || "--" }}</div>
            <div class="city">{{ bridgeBaseInfoData.cAddress || "--" }}</div>
          </div>
          <div class="bridge-info-item-showBox" v-if="showItemShowBox">
            <div class="item-head">
              <div class="head-title">基本信息</div>
              <div class="head-icon" @click="showItemShowBox = false">
                <img
                  src="../../../static/images/bridgeAreaControl/icon_hidden.png"
                  alt=""
                />
              </div>
            </div>
            <div class="item-couplet">
              <div class="item-couplet-ITEM">
                <div class="ITEM-left">桥梁名称</div>
                <div class="ITEM-right">
                  {{ bridgeBaseInfoData.bridgeName || "--" }}
                </div>
              </div>
              <div class="item-couplet-ITEM">
                <div class="ITEM-left">桥梁类型</div>
                <div class="ITEM-right">
                  {{ bridgeBaseInfoData.cBridgelx || "--" }}
                </div>
              </div>
              <div class="item-couplet-ITEM">
                <div class="ITEM-left">建设单位</div>
                <div class="ITEM-right">
                  {{ bridgeBaseInfoData.cBridgegldw || "--" }}
                </div>
              </div>
              <div class="item-couplet-ITEM">
                <div class="ITEM-left">地理位置</div>
                <div class="ITEM-right">
                  {{ bridgeBaseInfoData.cAddress || "--" }}
                </div>
              </div>
              <div class="item-couplet-ITEM">
                <div class="ITEM-left">所属航道</div>
                <div class="ITEM-right">
                  {{ bridgeBaseInfoData.cHangdao || "--" }}
                </div>
              </div>
              <div class="item-couplet-ITEM">
                <div class="ITEM-left">所在航道等级</div>
                <div class="ITEM-right">
                  {{ bridgeBaseInfoData.hangdaoLevel || "--" }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- <div
          class="bridge-info-item"
          :style="
            !showItemShowBox2 ? 'overflow: hidden;' : 'overflow: visible;'
          "
        >
          <div class="item-head">
            <div class="head-title">桥梁画像</div>
          </div>
          <div class="item-couplet">
            <div class="item-couplet-ITEM">
              <div class="ITEM-left">通航净宽</div>
              <div class="ITEM-right">
                <template v-if="bridgePortraitData.wide">
                  <img
                    v-if="bridgePortraitData.wide == '是'"
                    src="../../../static/images/bridgeAreaControl/icon_dabiao.png"
                    alt=""
                  />
                  <img
                    v-else
                    src="../../../static/images/bridgeAreaControl/icon_budabiao.png"
                    alt=""
                  />
                </template>
                <template v-else> -- </template>
              </div>
            </div>
            <div class="item-couplet-ITEM">
              <div class="ITEM-left">通航净高</div>
              <div class="ITEM-right">
                <template v-if="bridgePortraitData.high">
                  <img
                    v-if="bridgePortraitData.high == '是'"
                    src="../../../static/images/bridgeAreaControl/icon_dabiao.png"
                    alt=""
                  />
                  <img
                    v-else
                    src="../../../static/images/bridgeAreaControl/icon_budabiao.png"
                    alt=""
                  />
                </template>
                <template v-else> -- </template>
              </div>
            </div>
            <div class="item-couplet-ITEM">
              <div class="ITEM-left">设标情况</div>
              <div class="ITEM-right">
                <template v-if="bridgePortraitData.shebiao">
                  <img
                    v-if="bridgePortraitData.shebiao == '是'"
                    src="../../../static/images/bridgeAreaControl/icon_dabiao.png"
                    alt=""
                  />
                  <img
                    v-else
                    src="../../../static/images/bridgeAreaControl/icon_budabiao.png"
                    alt=""
                  />
                </template>
                <template v-else> -- </template>
              </div>
            </div>
          </div>
          <div
            class="bridge-info-item-showBox"
            style="left: calc(-100% - 10px)"
            v-if="showItemShowBox2"
          >
            <div class="item-head">
              <div class="head-title">开平大桥2</div>
              <div class="head-icon" @click="showItemShowBox2 = false">
                <img
                  src="../../../static/images/bridgeAreaControl/icon_hidden.png"
                  alt=""
                />
              </div>
            </div>
          </div>
        </div> -->
        <div
          class="bridge-info-item"
          :style="
            !showItemShowBox2 ? 'overflow: hidden;' : 'overflow: visible;'
          "
        >
          <div class="item-head">
            <div class="head-title">桥梁隐患情况</div>
            <div 
              class="head-icon" 
              @click="showDialog({
                title: '海事关于隐患桥梁的定义',
                message: '存在桥区水域船舶不安全航行行为、桥区水域船舶航行受限、发现的涉及桥梁方面的风险隐患、未划定桥区水域等问题即为隐患桥梁'
              })"
            >
              <img src="../../../static/images/bridgeAreaControl/tips-icon.png" alt="" />
            </div>
          </div>
          <div class="item-couplet" style="margin-top: 10px">
            <div class="item-couplet-ITEM">
              <div class="ITEM-left">是否隐患桥梁</div>
              <div 
                class="ITEM-right"
                :style="bridgePortraitData?.isHidden == '否'?'color:#4ed9a0;':'color:#f13939;'"
              >
                {{ bridgePortraitData?.isHidden }}
              </div>
            </div>
            <div class="item-couplet-ITEM">
              <div class="ITEM-left">净高是否达标</div>
              <div 
                class="ITEM-right" 
                style="font-size: 16px;" 
                :style="bridgePortraitData?.isDabiao == '达标'?'color:#4ed9a0;':'color:#f13939;'"
              >
                {{ bridgePortraitData?.isDabiao }}
              </div>
            </div>
          </div>
          <!-- <div class="item-empty" v-if="!bridgePortraitData?.isDabiao">暂无数据</div>
          <div :class="bridgePortraitData?.isDabiao == '达标'?'item-dabiao':'item-budabiao'">
            {{ bridgePortraitData?.isDabiao }}
          </div>  -->
        </div>
        <div
          class="bridge-info-item"
          :style="
            !showItemShowBox3 ? 'overflow: hidden;' : 'overflow: visible;'
          "
        >
          <div class="item-head">
            <div class="head-title">通航孔</div>
            <div
              class="head-icon"
              @click="showItemMainFalse(), (showItemShowBox3 = true)"
            >
              <img
                src="../../../static/images/bridgeAreaControl/icon_show.png"
                alt=""
              />
            </div>
          </div>
          <div class="item-couplet" style="margin-top: 10px">
            <div class="item-couplet-ITEM">
              <div class="ITEM-left">通航孔</div>
              <div class="ITEM-right">
                {{ bridgeWaterwayRiskData.tonghangnum || "--" }}
                <span class="unit">个</span>
              </div>
            </div>
            <div class="item-couplet-ITEM">
              <div class="ITEM-left">实测通航净高</div>
              <div class="ITEM-right">
                {{ bridgeWaterwayRiskData.shicetongh?.toFixed(1) || "--"
                }}<span class="unit">m</span>
              </div>
            </div>
          </div>
          <div class="bridge-info-item-showBox" v-if="showItemShowBox3">
            <div class="item-head">
              <div class="head-title">通航孔</div>
              <div class="head-icon" @click="showItemShowBox3 = false">
                <img
                  src="../../../static/images/bridgeAreaControl/icon_hidden.png"
                  alt=""
                />
              </div>
            </div>
            <div class="item-couplet">
              <div class="item-couplet-ITEM">
                <div class="ITEM-left">单向/双向通行</div>
                <div class="ITEM-right">
                  {{ bridgeWaterwayRiskData.tonghangkong[0]?.tonghangkGz || "--" }}/{{
                    bridgeWaterwayRiskData.tonghangkong[1]?.tonghangkGz || "--"
                  }}
                </div>
              </div>
              <div class="item-couplet-ITEM">
                <div class="ITEM-left">通航孔数量</div>
                <div class="ITEM-right">
                  {{ bridgeWaterwayRiskData.tonghangnum || "--" }}个
                </div>
              </div>
              <div class="item-couplet-ITEM">
                <div class="ITEM-left">设计最高通航水位</div>
                <div class="ITEM-right">
                  {{ bridgeWaterwayRiskData.shejizuigao || "--" }}m
                </div>
              </div>
              <div class="item-couplet-ITEM">
                <div class="ITEM-left">实时通航净高</div>
                <div class="ITEM-right">
                  {{ bridgeWaterwayRiskData.shicetongh || "--" }}m
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="bridge-info-item">
          <div class="item-head">
            <div class="head-title">桥区船舶密度</div>
            <!-- <div class="head-more">
              更多
              <img
                src="../../../static/images/bridgeAreaControl/icon_more.png"
                alt=""
              />
            </div> -->
          </div>
          <div class="item-empty" v-if="!bgCbmdData.hsCbll">暂无数据</div>
          <div class="item-cbmd" v-else>
            <div class="title">上个月船舶流量</div>
            <div class="value">{{ bgCbmdData.hsCbll || "--" }}</div>
          </div>
        </div>
        <div class="bridge-info-item">
          <div class="item-head">
            <div class="head-title">水位情况</div>
            <div
              class="head-more"
              @click="clickswqk"
              v-if="bgWaterSitData?.name"
            >
              更多
              <img
                src="../../../static/images/bridgeAreaControl/icon_more.png"
                alt=""
              />
            </div>
          </div>
          <div class="item-empty" v-if="!bgWaterSitData?.name">暂无数据</div>
          <div class="item-swqk" v-else>
            <div class="swqk-name">{{ bgWaterSitData?.name || "--" }}</div>
            <div class="swqk-value">
              {{ bgWaterSitData?.swz || "--" }} <span class="unit">m</span>
              <span class="swqk-ss">实时</span>
            </div>
          </div>
        </div>
        <div class="bridge-info-item">
          <div class="item-head">
            <div class="head-title">预警情况</div>
            <div
              class="head-more"
              @click="clickyjqk"
              v-if="
                yawStatisticsData.total_num[0]?.chaogaoAlarm ||
                yawStatisticsData.total_num[0]?.chaosuAlarm ||
                yawStatisticsData.total_num[0]?.pianhangAlarm
              "
            >
              更多
              <img
                src="../../../static/images/bridgeAreaControl/icon_more.png"
                alt=""
              />
            </div>
          </div>
          <div class="item-couplet">
            <div class="item-couplet-ITEM">
              <div class="ITEM-left">超高统计</div>
              <div class="ITEM-right" style="color: #f13939">
                {{
                  yawStatisticsData.total_num[0]?.chaogaoAlarm.toString() ||
                  "--"
                }}
              </div>
            </div>
            <div class="item-couplet-ITEM">
              <div class="ITEM-left">超速统计</div>
              <div class="ITEM-right" style="color: #f13939">
                {{
                  yawStatisticsData.total_num[0]?.chaosuAlarm.toString() || "--"
                }}
              </div>
            </div>
            <div class="item-couplet-ITEM">
              <div class="ITEM-left">偏航统计</div>
              <div class="ITEM-right" style="color: #f13939">
                {{
                  yawStatisticsData.total_num[0]?.pianhangAlarm.toString() ||
                  "--"
                }}
              </div>
            </div>
          </div>
        </div>
        <div class="bridge-info-item">
          <div class="item-head">
            <div class="head-title">设计图纸</div>
            <div class="head-more" @click="clickSJTZ" v-if="bgElevationData?.num!='0'">
              更多
              <img
                src="../../../static/images/bridgeAreaControl/icon_more.png"
                alt=""
              />
            </div>
          </div>
          <div class="item-sjtz">
            <div class="sjtz-num">
              <div class="num-content">
                {{ bgElevationData?.num?.toString() || "--" }}
                <span class="unit">份</span>
              </div>
            </div>
            <img
              src="../../../static/images/bridgeAreaControl/bridge-tz.png"
              alt=""
            />
          </div>
        </div>
        <div class="bridge-info-item">
          <div class="item-head">
            <div class="head-title">一桥一方案</div>
            <div class="head-more" @click="clickScheme" v-if="bridgePlanData">
              更多
              <img
                src="../../../static/images/bridgeAreaControl/icon_more.png"
                alt=""
              />
            </div>
          </div>
          <div class="item-sjtz">
            <img
              src="../../../static/images/bridgeAreaControl/bridge-yfayq.png"
              alt=""
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, watch, onUnmounted, nextTick } from "vue";
import { useRouter } from "vue-router";
import {
  getBridgeList,
  bridgeBaseInfo,
  bridgeWaterwayRisk,
  bgWaterSit,
  yawStatistics,
  getBgPic,
  bridgePortrait,
  bridgePlan,
  bgElevation,
  bgVideo,
  getUrl,
  getBmCenter,
  bgCbmd,
  getBgHd,
  bgModel, //获取桥梁全景
} from "../../../utils/bridgeAreaControlApi";
import { closeToast, showLoadingToast, showToast, showDialog  } from "vant";
import videojs from "video.js";
import "video.js/dist/video-js.css";
const baseApi = `${import.meta.env.VITE_APP_BASE_API}`;
const router = useRouter();
const bridgeValue = ref("");
const isShowVideo = ref(false);
const showItemShowBox = ref(false);
const showItemShowBox2 = ref(false);
const showItemShowBox3 = ref(false);
const isLoading = ref(false);
const loadingNum = ref(0);
const show2 = ref(false);
const cascaderValue2 = ref("");
const options2 = ref([]);
const currentRate = ref(0);
const onChange2 = ({ value, tabIndex, selectedOptions }) => {
  let { index } = selectedOptions[0];
  if (tabIndex == "0") {
  //   showLoadingToast("加载中...");
  //   getBgHd({ bmpName: value })
  //     .then((res) => {
  //       if (res.data.length == "0") {
  //         setTimeout(() => {
  //           showToast("当前选项找不到数据");
  //         }, 500);
  //       }
  //       let children = res.data?.map((ele, currentIndex) => {
  //         return {
  //           text: ele.hangdao,
  //           value: ele.hangdao,
  //           index: currentIndex,
  //           plantIndex: index,
  //           children: [],
  //         };
  //       });
  //       console.log(children);
  //       options2.value[index].children = children || [];
  //     })
  //     .finally(() => {
  //       closeToast();
  //     });
  // } else if (tabIndex == "1") {
  //   showLoadingToast("加载中...");
  //   let { plantIndex, index } = selectedOptions[1];
    getBridgeList({ bmpName: value })
      .then((res) => {
        if (res.data.length == "0") {
          setTimeout(() => {
            showToast("当前选项找不到数据");
          }, 500);
        }
        let children2 = res.data?.map((ele) => {
          return {
            text: ele.name,
            value: ele.name,
          };
        });
        // console.log(options2.value[plantIndex].children[index]);
        // if (options2.value[plantIndex].children[index]) {
        //   options2.value[plantIndex].children[index].children = children2 || [];
        // }
        options2.value[index].children = children2 || [];
      })
      .finally(() => {
        closeToast();
      });
  }
};
const onFinish2 = ({ selectedOptions }) => {
  show2.value = false;
  bridgeValue.value = selectedOptions[1].value;
  getData();
};

const initVideo = (url) => {
  videojs(
    "myVideo",
    {
      language: "zh-CN", //汉化
      autoplay: true, // true,浏览器准备好时开始播放
      muted: false, // 默认情况下将会消除音频
      loop: true, // 导致视频一结束就重新开始
      controls: true, //取消视频中的进度条
      preload: "metadata", // auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
      fluid: false, // 当true时，将按比例缩放以适应其容器
      sources: [
        {
          type: "application/x-mpegURL",
          src: url, //视频播放地址
        },
      ],
      notSupportedMessage: "此视频暂无法播放，请稍后再试", // 无法播放媒体源时显示的默认信息
      textTrackDisplay: false,
      techOrder: ["html5", "flash"],
    },
    () => {
      const myPlayer = videojs("myVideo");

      setTimeout(() => {
        myPlayer.play();
        myPlayer.on("play", function () {
          if (!sessionStorage.getItem("isReload")) {
            let u = navigator.userAgent;
            let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //判断是否是 iOS终端
            if (isIOS) {
              setTimeout(() => {
                location.reload();
              }, 3000);
              sessionStorage.setItem("isReload", true);
            }
          }
        });
        myPlayer.on("error", () => {
          playVideoFn();
        });
      }, 500);
    }
  );
};
const VideoUrl = ref("");
const playVideoFn = async () => {
  isLoading.value = true;
  let res = await bgVideo({ bridge: bridgeValue.value });
  getUrl({ resid: res.data[0]?.id })
    .then((res) => {
      if (res.code === 200 && res.data.url) {
        VideoUrl.value = res.data.url;
      }
    })
    .finally(() => {
      isLoading.value = false;
    });
};
const videoClick = () => {
  isShowVideo.value = true;
  setTimeout(() => {
    initVideo(VideoUrl.value);
  }, 500);
};
const showLoading = () => {
  isLoading.value = true;
  loadingNum.value++;
};
const hiddenLoading = () => {
  loadingNum.value--;
  if (loadingNum.value === 0) {
    isLoading.value = false;
  }
};
const setBridgeVal = (val) => {
  bridgeValue.value = val;
  isShowVideo.value = false;
  cascaderValue2.value = "";
  getData();
};
const clickswqk = () => {
  router.push({
    path: "/bridge_swqk",
    query: { bridge: bridgeValue.value, type: "bridge" },
  });
};
const clickyjqk = () => {
  router.push({
    path: "/bridge_yjqk",
    query: { bridge: bridgeValue.value },
  });
};
const clickSJTZ = () => {
  router.push({
    path: "/bridge_sjtz",
    query: { urlList: JSON.stringify(bgElevationData.value.list) },
  });
};
const clickScheme = (val) => {
  // router.push({
  //   path: "/bridge_scheme",
  //   query: { urlList: JSON.stringify(bgElevationData.value.list) },
  // });
  window.open(baseApi + bridgePlanData.value);
};
const showItemMainFalse = () => {
  showItemShowBox.value = false;
  showItemShowBox2.value = false;
  showItemShowBox3.value = false;
};
const bridgeOption = ref([]);
const getBridgeListDataFn = () => {
  return new Promise((resolve, reject) => {
    getBridgeList().then((res) => {
      if (res.code === 200 && res.data.length) {
        resolve(res.data);
      }
    });
  });
};
const bgCbmdData = ref({});
const getbgCbmdDataFn = (data) => {
  showLoading();
  bgCbmd(data)
    .then((res) => {
      if (res.code === 200 && res.data.length) {
        bgCbmdData.value = res.data[0];
      }
    })
    .finally(() => {
      hiddenLoading();
    });
};
const bgElevationData = ref({});
const getbgElevationDataFn = (data) => {
  showLoading();
  bgElevation(data)
    .then((res) => {
      if (res.code === 200 && res.data) {
        bgElevationData.value = res.data;
      }
    })
    .finally(() => {
      hiddenLoading();
    });
};
const bridgePlanData = ref("");
const getbridgePlanDataFn = (data) => {
  showLoading();
  bridgePlan(data)
    .then((res) => {
      if (res.code === 200 && res.data) {
        bridgePlanData.value = res.data.url;
      }
    })
    .finally(() => {
      hiddenLoading();
    });
};
const bridgePortraitData = ref({
  // shebiao: "",
  // high: "",
  // wide: "",
  bridgeName: "",
  isDabiao: "",
});
const getbridgePortraitDataFn = (data) => {
  showLoading();
  bridgePortrait(data)
    .then((res) => {
      if (res.code === 200 && res.data) {
        // bridgePortraitData.value = res.data;
        bridgePortraitData.value = res.data[0] || {};
      }
    })
    .finally(() => {
      hiddenLoading();
    });
};
const bridgeBaseInfoData = ref({});
const getBridgeBaseInfoDataFn = (data) => {
  showLoading();
  bridgeBaseInfo(data)
    .then((res) => {
      if (res.code === 200 && res.data.length) {
        bridgeBaseInfoData.value = res.data[0];
      }
    })
    .finally(() => {
      hiddenLoading();
    });
};
const bridgeWaterwayRiskData = ref({});
const getbridgeWaterwayRiskFn = (data) => {
  showLoading();
  bridgeWaterwayRisk(data)
    .then((res) => {
      if (res.code === 200) {
        bridgeWaterwayRiskData.value = res.data;
      }
    })
    .finally(() => {
      hiddenLoading();
    });
};
const bgWaterSitData = ref({});
const getbgWaterSitFn = (data) => {
  showLoading();
  bgWaterSit(data)
    .then((res) => {
      if (res.code === 200) {
        bgWaterSitData.value = res.data[0];
      }
    })
    .finally(() => {
      hiddenLoading();
    });
};
const yawStatisticsData = ref({
  total_num: [],
});
const getyawStatisticsFn = (data) => {
  showLoading();
  yawStatistics(data)
    .then((res) => {
      if (res.code === 200) {
        yawStatisticsData.value = res.data;
      }
    })
    .finally(() => {
      hiddenLoading();
    });
};
const BgPicData = ref({});
const getBgPicFn = (data) => {
  getBgPic(data)
    .then((res) => {
      if (res.code === 200 && res.data) {
        BgPicData.value = res.data;
      }
    })
    .finally(() => {
      hiddenLoading();
    });
};
const getBmCenterDataFn = (data) => {
  return new Promise((resolve, reject) => {
    getBmCenter(data)
      .then((res) => {
        if (res.code === 200 && res.data.length) {
          options2.value = res.data.map((ele, index) => {
            return {
              text: ele.name,
              value: ele.name,
              index: index,
              children: [],
            };
          });
        }
      })
      .finally(() => {
        resolve();
      });
  });
};
const getData = () => {
  // debugger;
  getBridgeBaseInfoDataFn({
    bridge: bridgeValue.value,
  });
  getbridgeWaterwayRiskFn({
    bridge: bridgeValue.value,
  });
  getbgWaterSitFn({
    bridge: bridgeValue.value,
  });
  getyawStatisticsFn({
    bridge: bridgeValue.value,
  });
  getBgPicFn({
    bridge: bridgeValue.value,
  });
  getbridgePortraitDataFn({
    bridge: bridgeValue.value,
  });
  getbridgePlanDataFn({
    bridge: bridgeValue.value,
  });
  getbgElevationDataFn({
    bridge: bridgeValue.value,
  });
  getbgCbmdDataFn({
    bridge: bridgeValue.value,
  });
  playVideoFn();
  bgModelFn();
};

//获取桥梁全景
const haveLink = ref("");
const bgModelFn = () => {
  bgModel({
    bridge: bridgeValue.value
  }).then((res) => {
    if(res.code === 200 && res.data.link){
      haveLink.value = res.data.link;
    }else{
      haveLink.value = "";
    }
  });
};
const goLink = () => {
  window.open(haveLink.value);
};

onMounted(async () => {
  let routerData = router?.currentRoute?.value?.query.bridge;
  isLoading.value = true;
  bridgeOption.value = await getBridgeListDataFn();
  await getBmCenterDataFn();
  // bridgeValue.value = routerData || bridgeOption.value[0].name;
  bridgeValue.value = routerData || "北斗大桥";
  getData();
});

onUnmounted(() => {
  if (isShowVideo.value) {
    const myPlayer = videojs("myVideo");
    if (myPlayer) {
      myPlayer.dispose();
    }
  }
  sessionStorage.removeItem("isReload");
});
</script>

<style lang="scss" scoped>
::v-deep.el-select-dropdown__item {
  width: calc(100vw - 40px);
}
.bridge-main {
  position: relative;
  height: 100%;
  .bridge-main-content {
    height: calc(100% - 50px);
    overflow-y: scroll;
    padding: 16px 20px;
    box-sizing: border-box;
  }
}
.choose {
  width: 100%;
  height: 50px;
  background: #ffffff;
  border-radius: 0px 0px 0px 0px;
  opacity: 1;
  // border: 1px solid #d9d9d9;
  text-align: center;
  line-height: 50px;
  position: relative;
  padding: 0 20px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .cascade-option {
    width: 12%;
    height: 37px;
    // background-color: #96bcf4;
    img {
      width: 100%;
      height: 100%;
      padding-top: 2px;
    }
  }
  .option {
    width: 100%;
    height: 100%;
    .choose-input {
      width: 94%;
      height: 30px;
      border: none;
      border: 1px solid #dee1e6;
      text-align: center;
    }
    .choose-list {
      position: absolute;
      font-size: 12px;
      font-weight: 400;
      color: #595959;
      display: flex;
      justify-content: center;
      width: 124px;
      background: #fff;
      z-index: 999;
      width: 100%;
      .list {
        width: 94%;
        height: 130px;
        overflow-y: scroll;
        margin-top: -2px;
        border: 1px solid #d9d9d9;
        li {
          line-height: 35px;
          list-style-type: none;
        }
      }
    }
  }
}
.bridge-img {
  width: 100%;
  height: 208px;
  border-radius: 8px 8px 8px 8px;
  background-color: #fff;
  box-sizing: border-box;
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.08);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  .video-click {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 80px;
    height: 26px;
    color: #fff;
    background: #165dff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    z-index: 1;
  }
  .sanwei{
    position: absolute;
    top: 8px;
    left: 8px;
    width: 60px;
    height: 26px;
    color: #fff;
    background: #165dff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    z-index: 1;
  }
  .video {
    width: 100%;
    height: 100%;
    .video-content {
      width: 100%;
      height: 100%;
    }
  }
  .img {
    width: 100%;
    height: 100%;
  }
  img {
    width: 100%;
    height: 100%;
  }
}
.bridge-info {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
  .bridge-info-item {
    overflow: hidden;
    width: calc(50% - 5px);
    margin-top: 16px;
    box-sizing: border-box;
    position: relative;
    height: 130px;
    background: #ffffff;
    border-radius: 8px 8px 8px 8px;
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.08);
    .item-head {
      display: flex;
      justify-content: space-between;
      position: relative;
      background: rgba(22, 93, 255, 0.05);
      height: 36px;
      color: #262626;
      padding: 0 8px;
      align-items: center;
      border-bottom: 1px solid #e6e6e6;
      .head-title {
        font-size: 14px;
      }
      .head-icon {
        width: 16px;
        height: 16px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .head-more {
        display: flex;
        align-items: center;
        color: #abadb1;
        font-size: 12px;
        img {
          width: 4px;
          height: 6px;
          margin-left: 4px;
        }
      }
    }
    .item-sshd {
      padding: 0 8px;
      box-sizing: border-box;
      .title {
        color: #595959;
        font-size: 24px;
        line-height: 36px;
        margin-top: 16px;
        font-weight: 800;
        text-align: center;
        white-space: nowrap;
        text-overflow:ellipsis;
        overflow:hidden;
      }
      .city {
        margin-top: 14px;
        color: rgba(0, 0, 0, 0.45);
        line-height: 24px;
        text-align: right;
      }
    }
    .item-swqk {
      padding: 0 8px;
      box-sizing: border-box;
      text-align: center;
      .swqk-name {
        font-weight: 400;
        margin-top: 16px;
        color: #8c8c8c;
        height: 20px;
        font-size: 14px;
      }
      .swqk-value {
        margin-top: 8px;
        color: #266fe8;
        font-size: 24px;
        .unit {
          color: #a4a4a4;
          font-size: 20px;
        }
        .swqk-ss {
          margin-left: 4px;
          background: rgba(78, 217, 160, 0.1);
          border-radius: 4px 4px 4px 4px;
          padding: 2px 3px;
          opacity: 1;
          font-size: 12px;
          color: #4ed9a0;
        }
      }
    }
    .item-cbmd {
      padding: 0 8px;
      box-sizing: border-box;
      text-align: center;
      .title {
        color: rgba(0, 0, 0, 0.45);
        font-size: 14px;
        line-height: 19px;
        font-weight: 400;
        margin-top: 16px;
      }
      .value {
        margin-top: 4px;
        color: #266fe8;
        line-height: 24px;
        font-size: 24px;
        font-weight: bold;
      }
    }
    .item-chart {
      margin-top: 5px;
      height: 75px;
      width: 100%;
      //   margin: 10px 0;
    }
    .item-couplet {
      padding: 0 8px;
      box-sizing: border-box;
      .item-couplet-ITEM {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 30px;
        color: rgba(0, 0, 0, 0.45);
        .ITEM-left {
          color: rgba(0, 0, 0, 0.45);
          font-size: 14px;
        }

        .ITEM-right {
          font-size: 18px;
          font-weight: bold;
          color: #595959;
          max-width: 50px;
          // overflow: hidden;
          // text-overflow: ellipsis;
          // white-space: nowrap;
          img {
            width: 24px;
            height: 22px;
          }
          .unit {
            font-size: 14px;
            color: rgba(108, 108, 108, 1);
          }
        }
      }
    }
    .item-bigGreen {
      color: #00c460;
      font-size: 28px;
      margin-top: 10px;
    }
    .bridge-info-item-showBox {
      position: absolute;
      top: 0;
      left: 0;
      box-sizing: border-box;
      width: calc(100vw - 40px);
      overflow: hidden;
      z-index: 8;
      background: #ffffff;
      border-radius: 8px 8px 8px 8px;
      box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.08);
      .item-head {
        display: flex;
        justify-content: space-between;
        position: relative;
        background: rgba(22, 93, 255, 0.05);
        height: 36px;
        color: #262626;
        padding: 0 8px;
        align-items: center;
        border-bottom: 1px solid #e6e6e6;
        .head-title {
          font-size: 14px;
        }
        .head-icon {
          width: 12px;
          height: 12px;
          // position: absolute;
          // right: 8px;
          // top: 0;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
      .item-couplet {
        .item-couplet-ITEM {
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 44px;
          .ITEM-left {
            color: #595959;
            font-size: 14px;
            max-width: none;
          }

          .ITEM-right {
            color: #262626;
            font-size: 14px;
            max-width: none;
          }
        }
      }
    }
    .item-dabiao{
      text-align: center;
      line-height: 94px;
      font-size: 24px;
      font-weight: bold;
      color: #4ed9a0;
    }
    .item-budabiao{
      text-align: center;
      line-height: 94px;
      font-size: 24px;
      font-weight: bold;
      color: #f13939;
    }
  }
}

.item-sjtz {
  padding: 0 8px;
  position: relative;
  text-align: center;
  .sjtz-num {
    position: absolute;
    top: 0px;
    left: 8px;
    .num-content {
      font-size: 20px;
      font-weight: bold;
      color: #266fe8;
      .unit {
        font-weight: normal;
        color: #8c8c8c;
        font-size: 14px;
      }
    }
  }
  img {
    margin-top: 12px;
  }
}

::-webkit-scrollbar {
  display: none;
}
.item-empty {
  width: 100%;
  text-align: center;
  color: #8c8c8c;
  margin-top: 30px;
}
</style>
